<script setup lang="ts">
import { IExportModelData } from '@manycore/custom-miniapp-sdk';
import { ModelService } from '@manycore/custom-sdk';
import { getApplication } from '@/core/app';
import ModelImg from './ModelImg.vue';

async function getModelList(mId: string) {
  const modelService = getApplication().getService(ModelService);
  const data = await modelService.getParamData({ modelId: mId })
  const modelList: IExportModelData[] = data.paramModel
  return modelList
}

const props = defineProps<{ modelId: string }>()
const modelList = ref()

watchEffect(() => {
  const modelId = props.modelId
  if (!modelId) return
  getModelList(modelId).then(res => {
    modelList.value = res
  })
})

</script>
 
<template>
  <ADescriptions bordered size="small" :column="1" v-for="model of modelList">
    <ADescriptionsItem label="名称">{{ model.modelName }}</ADescriptionsItem>
    <ADescriptionsItem label="模型ID">{{ model.id }}</ADescriptionsItem>
    <ADescriptionsItem label="宽">{{ model.size.x }}</ADescriptionsItem>
    <ADescriptionsItem label="高">{{ model.size.y }}</ADescriptionsItem>
    <ADescriptionsItem label="深">{{ model.size.z }}</ADescriptionsItem>
    <ADescriptionsItem label="材质">{{ model.textureName }}</ADescriptionsItem>
    <ADescriptionsItem label="缩略图">
      <ModelImg :modelId="modelId" />
    </ADescriptionsItem>
  </ADescriptions>
</template>